import { useEffect, useState } from 'react';
import './index.less';
import { Button, Input, message } from 'antd';
import { getPwd, setLock } from '@/utils/token';
import { Timeout } from 'ahooks/lib/useRequest/src/types';
import dayjs from 'dayjs';

const Lock = () => {
  // 不论什么情况进入锁屏页面都视为锁屏，改变锁屏状态
  useEffect(() => {
    setLock(true);
  });
  // 锁屏icon
  const LockScreen = () => {
    return (
      <div>
        <svg
          t="1701855188844"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4309"
          width="35"
          height="35"
        >
          <path
            d="M810.666667 362.666667h-64V298.666667c0-129.28-105.386667-234.666667-234.666667-234.666667S277.333333 169.386667 277.333333 298.666667v64H213.333333A106.666667 106.666667 0 0 0 106.666667 469.333333v384A106.666667 106.666667 0 0 0 213.333333 960h597.333334a106.666667 106.666667 0 0 0 106.666666-106.666667v-384A106.666667 106.666667 0 0 0 810.666667 362.666667zM320 298.666667c0-105.813333 86.186667-192 192-192s192 86.186667 192 192v64h-384V298.666667z m554.666667 554.666666c0 35.413333-28.586667 64-64 64H213.333333c-35.413333 0-64-28.586667-64-64v-384c0-35.413333 28.586667-64 64-64h597.333334c35.413333 0 64 28.586667 64 64v384z"
            fill="#ffffff"
            p-id="4310"
          ></path>
          <path
            d="M512 533.333333c-11.946667 0-21.333333 9.386667-21.333333 21.333334v213.333333c0 11.946667 9.386667 21.333333 21.333333 21.333333s21.333333-9.386667 21.333333-21.333333v-213.333333c0-11.946667-9.386667-21.333333-21.333333-21.333334z"
            fill="#ffffff"
            p-id="4311"
          ></path>
        </svg>
      </div>
    );
  };

  // 解锁状态
  const [isLock, setIsLock] = useState(false);
  // 输入框绑定的值
  const [password, setPassword] = useState('');

  // 输入框内容发生变化时
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };
  // 进入系统
  const unLock = async () => {
    if (password.trim() === '') {
      return message.error('请输入密码');
    }
    if (password !== getPwd()) {
      console.log(getPwd());

      return message.error('密码错误');
    }
    await message.success('密码正确', 1);
    setLock(false);
    window.location.replace('/Business');
    return;
  };

  // 点击次数
  const [count, setCount] = useState<number>(0);
  // 定时器
  const [timer, setTimer] = useState<Timeout | null>(null);
  // 紧急解锁-当2秒内点击左上角次数大于等于5时，紧急解锁
  const hidden = async () => {
    setCount(count + 1);
    // 当点击次数大于等于5时，紧急解锁
    console.log(count);

    if (count >= 4) {
      setCount(0);
      await message.warning('紧急解锁', 0.5);
      setLock(false);
      window.location.replace('/Business');
    } else {
      if (timer) {
        clearTimeout(timer);
      }
      setTimer(
        setTimeout(() => {
          setCount(0);
          setTimer(null);
        }, 2000),
      );
    }
  };

  const getChineseWeekday = (day: number) => {
    const chineseDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return chineseDays[day];
  };

  const [nickName, setNickName] = useState('admin');
  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('userInfo') || '');
    if (data) {
      console.log(11);

      if (data.realName) {
        setNickName(data.realName);
        return;
      } else {
        setNickName(data.username);
      }
    }
  }, []);
  return (
    <>
      <div className="unLock">
        {isLock ? (
          <div className="loginForm">
            <div className="avatar">
              <div className="img"></div>
            </div>
            <div className="nickName">{nickName}</div>
            <Input.Password
              placeholder="请输入登录密码"
              onChange={onChange}
              onPressEnter={unLock}
            />
            <div className="bottom">
              <Button type="text" style={{ color: '#fff' }} onClick={() => setIsLock(false)}>
                返回
              </Button>
              <Button
                type="text"
                style={{ color: '#fff' }}
                onClick={() => window.location.replace('/login')}
              >
                重新登录
              </Button>
              <Button type="text" style={{ color: '#fff' }} onClick={() => unLock()}>
                进入系统
              </Button>
            </div>
          </div>
        ) : (
          <div className="loginBg">
            <div
              className="top"
              onClick={() => {
                setIsLock(true);
              }}
            >
              <LockScreen />
            </div>
            <div
              className="timeDate"
              onClick={() => {
                setIsLock(true);
              }}
            >
              <div className="time">{dayjs().format('HH:mm')}</div>
              <div className="date">
                {dayjs().format('MM月DD日')} {getChineseWeekday(Number(dayjs().format('d')))}
              </div>
            </div>
          </div>
        )}
        <div className="hidden" onClick={hidden}></div>
      </div>
    </>
  );
};

export default Lock;
